<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="utf-8">
    <title>test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
body{position: relative}
        
        .wrapper {
            width: 100px;
            height: 100px;
            opacity: 1;
            border: solid 1px #ccc;
            background: orange;
            position: relative;
            left: 0;
            top: 0;
        }
        .browser{
            border: solid 1px #ccc;
            background:blanchedalmond;
            width: 100px;
            height: 100px;
            position:absolute;
            top:0;
            left:0;
            z-index: 1;
        }
        ul {
            position: relative;
        }

        li {
            line-height: 32px;
            height: 32px;
            width: 120px;
            cursor: pointer;
        }

        li.nav {
            border: solid 1px #ccc;
            line-height: 32px;
            height: 32px;
            text-align: center;
            float: left;
        }

        .bg {
            position: absolute;
            left: 0;
            top: 0;
            background: #f40;
            opacity: .5;
        }
    </style>
</head>

<body>
    <!-- <div class="wrapper">

    </div>
    <span style='height:100px;border:solid 1px #ccc;position:relative;left:300px;display: block;width:1px'></span>
    <div class="wrapper">
    </div>
    <div class="a s skj kjahskd asdhf   jakshjf "></div>
    <ul>
        <li class='nav'>webpack</li>
        <li class='nav'>vue</li>
        <li class='nav'>node</li>
        <li class='nav'>es6</li>
        <li class='bg'></li>
    </ul> -->
    <div class="browser"></div>
    <script>


        // 兼容获取类名
        Document.prototype.getElementsByClassName = function (tagclass) {
            var domArr = [];
            var allTagNode = Array.prototype.slice.call(document.getElementsByTagName("*"), 0);
            function dealClass(dom) {
                var reg = /\s+/g;
                var dealClassArr = dom.className.replace(reg, " ").trim();
                return dealClassArr;
            };
            allTagNode.forEach(function (el, index) {

                var arrClass = dealClass(el).split(" ");
                for (var i = 0; i < arrClass.length; i++) {
                    if (arrClass[i] == tagclass) {
                        domArr.push(el);
                    }
                }
            })
            return domArr
        }


        //获取样式
        function getStyle(obj, attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
        }
        // 动画
        //obj   dom
        //styleJson  需要执行的动画对象  例如{width:200,opacity:.5}
        //callback   回调函数
        function startMove(obj, style, callback) {
            var timer = null;
            clearInterval(obj.timer);
            var iSpeed, iCur
            obj.timer = setInterval(function () {
                var bStop = true;
                for (attr in style) {
                    if (attr == 'opacity') {
                        iCur = parseFloat(getStyle(obj, attr)) * 100;
                        iSpeed = (style[attr] * 100 - iCur) / 7;
                    } else {
                        iCur = parseFloat(getStyle(obj, attr));
                        iSpeed = (style[attr] - iCur) / 7;
                    }
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if (attr == 'opacity') {
                        obj.style[attr] = iCur + iSpeed / 100 + 'px';
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                    if (iCur != style[attr]) {
                        bStop = false;
                    }
                }
                if (bStop) {
                    alert(0)
                    clearInterval(obj.timer);
                    typeof callBack == 'function' ? callBack() : ''
                }
            }, 30)

        }


        //弹性运动
        function elasticMove(obj, target) {
            clearInterval(obj.timer);
            var iSpeed = 40, a, u = .8;
            obj.timer = setInterval(function () {
                a = (target - obj.offsetLeft) / 8;
                iSpeed += a;
                iSpeed *= u;
                if (Math.abs(target - obj.offsetLeft) <= 0 && Math.abs(iSpeed) <= 0) {
                    clearInterval(obj.timer);
                    obj.style.left = target + 'px';
                    console.log("over");
                } else {
                    obj.style.left = obj.offsetLeft + iSpeed + 'px';
                }
            }, 30)
        }

        // 窗口动画
        function browserMove(obj,iSpeedX,iSpeedY) {
            clearInterval(obj.timer, null);
            var g = 6;
            obj.timer = setInterval(function () {
                iSpeedY += g;
                var newLeft = obj.offsetLeft + iSpeedX;
                var newTop = obj.offsetTop + iSpeedY;
                var difW = document.documentElement.clientWidth - obj.offsetWidth;
                var difH = document.documentElement.clientHeight - obj.offsetHeight;

                if(newLeft >= difW){
                    iSpeedX *= -1;
                    iSpeedX *= .8;
                    iSpeedY *= .8;
                    newLeft = obj.offsetLeft + iSpeedX;
                }
                if(newLeft <= 0){
                    iSpeedX *= -1;
                    newLeft = 0;
                }
                if(newTop >= difH){
                    iSpeedY *= -1;
                    iSpeedX *= .8;
                    iSpeedY *= .8;
                    newTop = difH;
                }
                if(newTop <= 0){
                    iSpeedY *= -1;
                    newTop = 0;
                }
                if(Math.abs(iSpeedY) < 3 && Math.abs(iSpeedX) < 1 && newTop == difH ){
                    clearInterval(obj.timer);
                    console.log("over")
                }
                obj.style.left = newLeft + 'px';
                obj.style.top = newTop + 'px';
            }, 30)
        }


        // var wrapper = document.getElementsByClassName("wrapper")[0];
        // wrapper.onmouseenter = function () {
        //     elasticMove(this, 300);
        // }
        // var li = Array.prototype.slice.call(document.getElementsByClassName("nav"), 0);
        // li.forEach(function (el, index) {
        //     el.onmouseover = function () {
        //         var newLeft = this.offsetLeft;
        //         elasticMove(document.getElementsByClassName("bg")[0], newLeft);
        //     }
        // })
        var browserN = document.getElementsByClassName("browser")[0];
        var lastLeft = browserN.offsetLeft ;
        var lastTop = browserN.offsetTop;
        browserN.onmousedown = function (e) {
            var e = event || widnow.event;
            clearInterval(this.tiemr)
            var disX = e.clientX - this.offsetLeft;
            var disY = e.clientY - this.offsetTop;
            var that = this;
            var iSpeedX = 0;
            var iSpeedY = 0;
            
            document.onmouseover = function(e){
                var e = event || widnow.event;
                var newLeft = e.clientX - disX;
                var newTop = e.clientY - disY;
                iSpeedX = newLeft - lastLeft;
                iSpeedY = newTop - lastTop;
                lastLeft = newLeft;
                lastTop = newTop;
                that.style.left = newLeft + 'px';
                that.style.top = newTop + 'px';
            }
            document.onmouseup = function(){
                document.onmouseover = null;
                document.onmouseup = null;
                browserMove(that,iSpeedX,iSpeedY)
            }
        }

    </script>
</body>

</html>